<template>
  <div class="user_manage">
    <div style="width: 20vw" ref="u_right" class="a_right"></div>
    <div style="width: auto; padding-left: 2vw" ref="u_left" class="a_left">
      <div class="a_left_head">
        <h1 class="iconfont">用户管理</h1>
      </div>
      <div class="a_leftMain">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="学生用户" name="first">
            <el-table
              :data="
                studentList
              "
              style="width: 100%"
              max-height="400"
            >
              <el-table-column fixed label="编号" prop="_id"> </el-table-column>
              <el-table-column label="账号" prop="user"> </el-table-column>
              <el-table-column label="昵称" prop="student"> </el-table-column>
              <el-table-column label="性别" prop="sex"> </el-table-column>
              <el-table-column label="擅长科目" prop="subject_good"> </el-table-column>
              <el-table-column align="right" fixed="right" width="180">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="search1"
                    size="mini"
                    placeholder="输入关键字"
                  >
                  <el-button @click.native="vague_Search1" slot="append" icon="el-icon-search"></el-button>
                  </el-input>
                </template>
                <template slot-scope="scope">
                   <el-button
                    size="mini" v-show="scope.row.flag==false"
                    type="danger"
                    @click="MoveInBlacklist(scope.$index, scope.row)"
                    >移入黑名单</el-button
                  >
                   <span v-show="scope.row.flag==true" >已在黑名单</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="Paginationbox">
                 <MyPagination class="requirePagination" :total="totalStudents" :pageSize="10" layout="total, prev, pager, next" :isSmall="true" @getIndex="getPage"></MyPagination>
               </div>
          </el-tab-pane>

          <el-tab-pane label="老师用户" name="second"> 
                   <el-table
              :data="
                teacherList
              "
              style="width: 100%"
              max-height="400"
            >
              <el-table-column fixed label="编号" prop="_id"> </el-table-column>
              <el-table-column label="账号" prop="user"> </el-table-column>
              <el-table-column label="昵称" prop="teacher"> </el-table-column>
              <el-table-column label="性别" prop="sex"> </el-table-column>
              <el-table-column label="擅长科目" prop="subject_good"> </el-table-column>
              <el-table-column label="在读院校" prop="school_name"> </el-table-column>
              <el-table-column align="right" fixed="right" width="180">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="search2"
                    size="mini"
                    placeholder="输入关键字"
                  >
                   <el-button  @click.native="vague_Search2" slot="append" icon="el-icon-search"></el-button>
                  </el-input>
                </template>
                <template slot-scope="scope">
                  <el-button 
                    size="mini"
                    type="danger" v-show="scope.row.flag==false"
                    @click="MoveInBlacklist(scope.$index, scope.row)"
                    >移入黑名单</el-button
                  >
                  <span v-show="scope.row.flag==true" >已在黑名单</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="Paginationbox">
                 <MyPagination class="requirePagination" :total="totalTeachers" :pageSize="10" layout="total, prev, pager, next" :isSmall="true" @getIndex="getPage"></MyPagination>
               </div>
          </el-tab-pane>

          <el-tab-pane label="黑名单" name="third">
                   <el-table
              :data="
                blackList
              "
              style="width: 100%"
              max-height="400"
            >
              <el-table-column fixed label="编号" prop="_id"> </el-table-column>
              <el-table-column label="账号" prop="user"> </el-table-column>
              <el-table-column label="昵称" prop="nickname"> </el-table-column>
              <el-table-column label="身份" prop="status"> </el-table-column>
              <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="search3"
                    size="mini"
                    placeholder="输入关键字"
                  >
                   <el-button  @click.native="vague_Search1" slot="append" icon="el-icon-search"></el-button>
                  </el-input>
                </template>
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="success"
                    @click="MoveOutBlacklist(scope.$index, scope.row)"
                    >移出黑名单</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="Paginationbox">
                 <MyPagination class="requirePagination" :total="totalBlacks" :pageSize="10" layout="total, prev, pager, next" :isSmall="true" @getIndex="getPage"></MyPagination>
               </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import {getUserList,insertBlack,removeBlack,vagueSearch,total} from "network/user_manage"
import MyPagination from 'components/my_pagination/MyPagination'//分页
export default {
  name: "user_manage",
  data() {
    return {
      activeName: "first",
      studentList: [], //学生名单
      teacherList: [], //老师名单
      blackList: [], //黑名单
      search1: "", //搜索的关键词
      search2: "", //搜索的关键词
      search3: "", //搜索的关键词
      studentPage:1,
      teacherPage:1,
      blackPage:1,
      totalStudents:100,
      totalTeachers:1000,
      totalBlacks:10,
      tabName:'first',
    };
  },
  watch: {
    lateralNavanimate(newValue, oldValue) {
      this.$refs.u_right.style.width = newValue + "vw";
      // this.$refs.a_left.style.width = (newValue+78.5)+'vw';
    },
    padding_left(newV, oldV) {
      this.$refs.u_left.style.paddingLeft = newV + "vw";
      if (newV == 2) {
        this.$refs.u_left.style.paddingLeft = "7vw";
      }

      console.log("newV:", newV);
    },
  },
  methods: {
    ...mapMutations(["changenavIndex"]),
    handleClick(tab, event) {//选项栏点击
      console.log(tab, event);
      if(tab.name=='first'){
        this.search1 = ''
        this.tabName = 'first'
        console.log("点击了学生用户名单");
         getUserList(this.studentPage,"Students").then(res=>{
          this.studentList = res;
          console.log("学生数据：",this.studentList)
    })
      }else if(tab.name=='second'){
        this.search2 = ''
        this.tabName = 'second'
        console.log("点击了老师用户名单")
        getUserList(this.teacherPage,"Teachers").then(res=>{
         this.teacherList = res
         console.log("老师数据：",res)
    })
      }else if(tab.name=='third'){
        this.search3 = ''
        this.tabName = 'third'
        console.log("点击了黑名单")
        getUserList(this.blackPage,"BlackList").then(res=>{
         this.blackList = res;
         console.log("黑名单数据：",res)
    });
      }
    },
    MoveInBlacklist(index, row) {//移入黑名单
        console.log(index, row);
        // _id,user,nickname,status
        let nickname;
        let list;
        if(row.status=='Students'){
          nickname = row.student
          list = this.studentList;
        }else{
          nickname = row.teacher
          list = this.teacherList
        }
        insertBlack(row._id,row.user,nickname,row.status).then(res=>{
          if(res.status==200){
             console.log(row._id+"移入黑名单")
             console.log("插入黑名单后台响应：",res)
            list[index].flag = true;
          }
        })
        // console.log(index, row.flag);
      },
    MoveOutBlacklist(index,row){//移出黑名单
        console.log(index, row);
        this.blackList.splice(index,1)
        // _id,status
        let list;
        if(row.status=='Students'){
          list = this.studentList;
        }else{
          list = this.teacherList
        }
        removeBlack(row.id,row.status).then(res=>{
          console.log(row.id+"移出黑名单")
          if(res.status==200){
            list[index].flag = false;
          }
        })
      },
    getPage(index){
      console.log("获取第"+index+"页的数据");
      let type =''
      if(this.tabName=='first'){
        type="Students"
      }else if(this.tabName=='second'){
        type="Teachers"
      }else{
        type="BlackList"
      }
   
      let that = this;
      that.studentPage = index;
      getUserList(that.studentPage,type).then(res=>{
        console.log(res);
      if(this.tabName=='first'){
        that.studentList = res;
      }else if(this.tabName=='second'){
        that.teacherList = res;
      }else{
        that.blackList = res;
      }
      
      })
    },
    vague_Search1(){
      // keyWord,type
      vagueSearch(this.search1,"Students").then(res=>{
        console.log("学生名单模糊搜索",res)
        if(res.length<=0){
          this.$message('暂时找不到匹配项!');
        }else if(res.length>0){
          this.studentList = res;
        }
      })
    },
     vague_Search2(){
      // keyWord,type
      vagueSearch(this.search2,"Teachers").then(res=>{
        console.log("老师名单模糊搜索",res)
        if(res.length<=0){
          this.$message('暂时找不到匹配项!');
        }else if(res.length>0){
          this.teacherList = res;
        }
      })
    },
     vague_Search3(){
      // keyWord,type
      vagueSearch(this.search3,"BlackList").then(res=>{
        console.log("黑名单模糊搜索",res)
        if(res.length<=0){
          this.$message('暂时找不到匹配项!');
        }else if(res.length>0){
          this.blackList = res;
        }
      })
    },
  },
  computed: {
    ...mapState({
      lateralNavanimate: (state) => state.lateralNavanimate,
      padding_left: (state) => state.padding_left,
    }),
  },
  mounted() {
    let that = this;
    // page,type
    getUserList(this.studentPage,"Students").then(res=>{
      this.studentList = res;
  
      console.log("学生数据：",this.studentList)
    })
    getUserList(this.teacherPage,"Teachers").then(res=>{
      this.teacherList = res

      console.log("老师数据：",res)
    })
    getUserList(this.blackPage,"BlackList").then(res=>{
      this.blackList = res;
      console.log("黑名单数据：",res)
    })
    total("Students").then(res=>{
      console.log("学生数目总量：",res)
      that.totalStudents = res.count
    })
    total("Teachers").then(res=>{
      console.log("老师数目总量：",res)
      that.totalTeachers = res.count
    })
    total("BlackList").then(res=>{
      console.log("黑名单数目总量：",res)
      that.totalBlacks = res.count
    })
  },
  activated() {
    this.$refs.u_left.style.paddingLeft = this.padding_left + "vw";
    if (this.padding_left == 2) {
      this.$refs.u_right.style.width = 22 - this.padding_left + "vw";
    }
    this.changenavIndex(2);
  },
  components: {MyPagination},
};
</script>

<style lang="less" scoped>
  .Paginationbox{
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    // background-color: black;
    height: 1.5rem;
    .requirePagination{
      position: absolute;
      left: 50%;
      transform: translateX(-200%);
    }
  }
.user_manage {
  display: flex;
  width: 100vw;
  .a_right {
    box-sizing: border-box;
  }
  .a_left {
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding-left: 8vw;
    flex: 1;
    color: #505050;
    .a_left_head {
      line-height: 2rem;
      h1 {
        font-size: 0.8rem;
      }
      position: absolute;
    }
    .a_leftMain {
      margin-top: 2rem;
      background-color: #fff;
      padding-left: 2%;
      padding-right: 2%;
      width: 90%;
    }
  }
}
/deep/.el-table__body-wrapper::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
  /deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  background-color: rgba(0, 0, 0, 0.1);
  background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
  }
  /deep/.el-table__body-wrapper::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #ededed;
  border-radius: 10px;
  }
</style>